<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Header :addNewTodo='addNewTodo'/>
      <!-- 第二步：通过v-bind把整个数组进行props传值给List子组件 -->
      <List :todoList='todoList' 
      :singleCheckHandle='singleCheckHandle'
      :deleteSingleHandle='deleteSingleHandle'
      />
      <!-- 第二十一步：把todolist传给footer，因为footer中需要拿到所有数据中done的值，来让全选按钮改变 -->
      <Footer :todoList='todoList' :checkAllHandle="checkAllHandle" :deleteAllHandle="deleteAllHandle"/>
    </div>
  </div>
</template>

<script>
import { nanoid } from 'nanoid'

import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'


export default {
  name: 'App',
  data(){
    return{
      //静态页面部署好后的第一步：定义列表的数据
      todoList:[
        {id:nanoid(),thing:'打篮球',done:false},
        {id:nanoid(),thing:'爬山',done:false},
        {id:nanoid(),thing:'说唱',done:false}
      ]
    }
  },
  components:{
    Header,
    List,
    Footer
  },
  // 第七步：发布数据，在父组件app中设置一个方法，并把这个方法传给子组件header
  methods:{
    addNewTodo(newTodo){
        this.todoList.unshift(newTodo)
    },
  //第十五步：点击单个复选框，修改data中done的值
  //先在父组件中定义一个事件函数，传给list组件，再由list组件传给item组件

    singleCheckHandle(id){
      // 第十七步：接收item组件传来的id后做判断，遍历所有数据，如果和点击的item的id相等，就改变这条数据的done的值，否则就返回原数据
      //因为map不是包装的方法，需要赋值给原来的todoList
       this.todoList = this.todoList.map((item)=>{
            // if(item.id===id){
            //   item.done =!item.done
            // }
            
            return (item.id===id)?{...item,done:!item.done}:item
        })
        // console.log(this.todoList)
    },
    //第十八步：点击删除的事件函数,并把这个函数传给item组件
    deleteSingleHandle(id){
      // 第二十步：用传过来的id进行比较
      this.todoList = this.todoList.filter((item)=>{
        // 如果相等就是要删除掉，所以留下不相等的
        return item.id!==id
      })
    },
    // 第二十四步：这个事件函数已经绑给footer中的全选框了，当点击时，把这边数据中的所有done改成和全选框的checked属性一致
    checkAllHandle(value){
    this.todoList = this.todoList.map((item)=>{
        return {...item,done:value}
      })
    },
    deleteAllHandle(){
      this.todoList.map((item)=>{
        return !item.done
      })
    }
  }
  
 
}
</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

</style>
